import React from 'react';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import { OverPack } from 'rc-scroll-anim';
import { getChildrenToRender } from './utils';

type P = {
  dataSource: any,
  isMobile?: boolean
  id: string
}

const v1img = [
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Grop_1_icon/xiaoweixingban%20.svg',
    name: '“小卫星”班',
    context: '“小卫星”班由著名小卫星设计专家曹喜滨院士领衔，学校航天学院院士师资班底，面向国家重大需求及航天发展前沿。',
  },
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Grop_1_icon/yongtanban%20.svg',
    name: '“永坦”班',
    context: '“永坦”班由刘永坦院士领衔并担任班主任，专为培养新体制雷达智能感知探测、5G通信网络、无人驾驶无线感知等领域的领军人才。'
  },
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Grop_1_icon/zhinengjiqiren.svg',
    name: '“智能机器人”班',
    context: '“智能机器人”班由著名机器人专家蔡鹤皋院士、邓宗全院士领衔。专为培养机器人和智能制造国际领军人才。'
  },
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Grop_1_icon/weilaijishumokuai.svg',
    name: '“未来技术模块”班',
    context: '“未来技术模块”班面向人类未来科技和产业发展，着力培养具有前瞻性、能够引领未来发展的科技创新领军人才。'
  },
]

class Content extends React.PureComponent<P> {
  render() {
    return (
      <div id={this.props.id} className="container-fluid" >
        <div className="row">
          <div className="col">

            <div className="container-xxl heada1">
              <div className="row">
                <div className="col">
                  <div className="heada1-h">
                    哈工大机器人与智能制造青少年科技培养基地
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col heada1-s">
                  HIT Robotics & Intelligent Manufacturing Science And Technology Training Base For Youth And Adolescents
                </div>
              </div>
              <div className="row">
                <div className="col heada1-t">
                  基础教育，聚焦新高考的青少年科技创新培养体系。
                </div>
              </div>
              <OverPack playScale={0.3} replay={false}  >
                <QueueAnim
                  type="bottom"
                  key="block"
                  className="row b1"
                  appear={false}
                >
                  {v1img.map((e, key) => {
                    return (
                      <div key={key} className="col">
                        <div className="card" >
                          <img src={e.img} className="card-img-top" alt="..." />
                          <div className="card-body p-0">
                            <p className="card-text">{e.name}</p>
                          </div>
                          <p className="card-hover">
                            {e.context}
                          </p>
                        </div>
                      </div>
                    )
                  })}
                </QueueAnim>
              </OverPack>

              <div className="row b2">
                <div className="col">
                  <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_2/zidingxiangjihua.png" alt="" />
                </div>
              </div>
              <OverPack playScale={0.3}>
                <QueueAnim
                  type="bottom"
                  key="block1"
                  leaveReverse
                  className="row b3"
                >
                  <div key="a1" className="col b3-1">
                    <div className="card" >
                      <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_2/logo_jd.svg" className="card-img-top" alt="..." />
                    </div>
                  </div>
                  <div key="a2" className="col b3-2">
                    <div className="card" >
                      <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_2/hgd.png" className="card-img-top" alt="..." />
                      <div className="card-body">
                        <p className="card-text">机器人与智能装备</p>
                        <p className="card-text">人工智能与信息学奥赛 </p>
                        <p className="card-text">航空航天与智能制造</p>
                      </div>
                    </div>
                  </div>
                  <div key="a3" className="col b3-3">
                    <div className="card" >
                      <div className="card-body">
                        <p className="card-text">
                          哈工大研学营
                        </p>
                        <p className="card-text">
                          “大家名师”近距离
                        </p>
                        <p className="card-text">
                          教具和校本教材开发
                        </p>
                        <p className="card-text">
                          科技创新示范校建设
                          学、研、赛体系拔尖人才培养化
                        </p>
                        <p className="card-text">
                          学、研、赛体系拔尖人才培养化
                        </p>
                      </div>
                    </div>
                  </div>
                </QueueAnim>
              </OverPack>
            </div>


          </div>

        </div>
      </div>
    );
  }
}

export default Content;
